<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            display: inline-block;
        }

        #search {
            width: 545px;
            height: 42px;
            border-color: #4E6EF2;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            float: left;
        }

        #btn {
            width: 108px;
            height: 42px;
            background-color: #4e6ef2;
            color: #fff;
            border: none;
            font-size: 17px;
            font-weight: 400;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            float: left;
        }

        #show {
            width: 545px;
            border: 1px solid #4e6ef2;
            position: relative;
            left: -55px;
            text-align: left;
        }
    </style>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<center>
    <img alt="" width="310" height="150" src="baidu.jpg"><br/>
    <div id="box">
        <input id="search" type="text" name="search"/>
        <button id="btn">百度一下</button>
    </div>
    <div id="show">

    </div>
</center>
</body>
</html>
<script>
    $(function() {
        //给输入框一个键盘抬起事件   onclick  click   onblur  blur
        //onkeyup    keyup
        $("#search").keyup(function() {

           //获取要搜索的值
            var search = $(this).val();
            if(search == "" || search == null) {
                $("#show").empty();
            }else {
                //ajax请求后台
                $.ajax({
                    url:"homework01Servlet",
                    data:{"search":search,"mark":"dimQuery"},
                    type:"post",
                    dataType:"json",
                    success:function(obj) {
                        $("#show").empty();
                        console.log(obj);
                        var str = "";
                        //遍历集合
                        for(var i = 0; i <= obj.length - 1; i++) {
                            str += obj[i][0] + "<br>";
                        }

                        $("#show").append(str);
                    }

                });
            }
        });

    });
</script>